layui.use('flow', function() {
    let flow = layui.flow;


    //评论生成函数(测试)
    function commit_generater(name, commit, date, imgsrc) {
        let htmlString = " <li>\n" +
            "\n" +
            "                                    <div class=\"layui-inline layui-anim layui-anim-up\" style=\"margin-left: 15px;margin-top: 20px\">\n" +
            "                                        <!--头像-->\n" +
            "                                        <img class=\"layui-circle\" src=\"" + imgsrc + "\" alt=\"????\" style=\"height: 50px;width: 50px\">\n" +
            "                                        <!--昵称-->\n" +
            "                                        <a style=\" margin-left: 5px\">" + name + "</a>\n" +
            "                                    </div>\n" +
            "\n" +
            "                                    <div style=\"margin-left: 75px;margin-top: 10px\">\n" +
            "                                        <a>" + commit + "</a>\n" +
            "                                    </div>\n" +
            "                                    <div style=\"margin-left: 75px;margin-top: 10px\">\n" +
            "                                        <a style=\"color: gray\">" + date + "</a>\n" +
            "                                        <a class=\"layui-icon\" style=\"margin-left: 10px;margin-top: 10px\" href=\"\">&#xe6c6;</a>\n" +
            "                                    </div>\n" +
            "\n" +
            "\n" +
            "                                </li>"

        return htmlString
    }

//评论生成函数(生产环境)
// function commit_generater(name, commit, date, img_src_prefix,to_user_page_prefix,owner_id){
//     let htmlString = " <li>\n" +
//         "\n" +
//         "                                    <div class=\"layui-inline layui-anim layui-anim-up\" style=\"margin-left: 15px;margin-top: 20px\">\n" +
//         "                                        <!--头像-->\n" +
//         "                                        <img class=\"layui-circle\" src=\""+img_src_prefix+"/"+owner_id+"\" alt=\"????\" style=\"height: 50px;width: 50px\">\n" +
//         "                                        <!--昵称-->\n" +
//         "                                        <a href=\""+to_user_page_prefix+"/"+owner_id+"\" style=\" margin-left: 5px\">"+name+"</a>\n" +
//         "                                    </div>\n" +
//         "\n" +
//         "                                    <div style=\"margin-left: 75px;margin-top: 10px\">\n" +
//         "                                        <a>"+commit+"</a>\n" +
//         "                                    </div>\n" +
//         "                                    <div style=\"margin-left: 75px;margin-top: 10px\">\n" +
//         "                                        <a style=\"color: gray\">"+date+"</a>\n" +
//         "                                        <a class=\"layui-icon\" style=\"margin-left: 10px;margin-top: 10px\" href=\"\">&#xe6c6;</a>\n" +
//         "                                    </div>\n" +
//         "\n" +
//         "\n" +
//         "                                </li>"
//
//     return htmlString
//}


//留言懒加载
    flow.load({
        elem: '#message' //流加载容器
        , isAuto: true
        , done: function (page, next) { //执行下一页的回调

            //模拟数据插入
            setTimeout(function () {
                let lis = [];
                for (var i = 0; i < 8; i++) {
                    lis.push(commit_generater("牛逼小王子",
                            (page - 1) * 8 + i + 1,
                            "2020年12月24日",
                            "/static/img/test/IMG_1008.jpg"//生产环境应当为动态API
                        )
                    )
                }

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(''), page < 10); //假设总页数为 10
            }, 500);
        }
    });

})